<template>
	<view>
		<!-- 加载动画 -->
		<view class="loading" v-if="loading">
			<view class="loading-spinner"></view>
			<text>加载中...</text>
		</view>
		
		<!-- 空状态提示 -->
	<!-- 	<view class="empty-state" v-if="!loading && communitlist.length === 0">
			<image src="/static/empty.png" mode="aspectFit"></image>
			<text>暂无商家数据</text>
		</view> -->
		
		<!-- 商家列表 -->
		<view class="commuit fade-in" v-for="(itme, index) in communitlist" :key="index" @click="ComData(itme.id)">
			<view class="img">
				<image :src="'https:' + itme.imageUrl" mode=""></image>
			</view>
			<view class="left">
				<view class="name">{{itme.name}}</view>
				<view class="dbs">{{itme.address}}</view>
				<view style="font-size: 24rpx;color:#EA9518 ;">
					<u-rate :count="count" v-model="itme.rating" disabled :active-color="'#EA9518'" :size="25" :gutter="5" :inactive-color="'#C0C1C1'"></u-rate>
					<text style="margin-left: 3rpx;">{{itme.rating}}</text>
				</view>
				<view class="tags">
					<view class="tags_itme" v-for="(it, idex) in itme.tags.slice(0,3)" :key="idex">
						{{it}}
					</view>
				</view>
			</view>
		</view>
		
		<!-- 加载更多状态 -->
		<view class="load-more" v-if="!loading && hasMore">
			<view class="load-more-text" @click="loadMore">加载更多</view>
		</view>
		<view class="no-more" v-if="!loading && !hasMore">
			<text>没有更多数据了</text>
		</view>
	</view>
</template>

<script>
	import { merchantpage } from '@/core/api/index.js'
	export default{
		data(){
			return{
				communitlist:[],
				count: 5,
				value: 0,
				total:0,
				currentPage: 1,
				pageSize: 10,
				loading: false,
				hasMore: true
			}
		},
		onLoad() {
			this.fetchMerchantList()
			this.setupScrollListener()
		},
		onUnload() {
			uni.removeEventListener('scroll', this.handleScroll)
		},
		methods:{
			// 获取商家列表
			async fetchMerchantList(reset = false) {
				if (this.loading) return
				
				this.loading = true
				try {
					if (reset) {
						this.currentPage = 1
						this.communitlist = []
					}
					
					let params = {
						page: this.currentPage,
						size: this.pageSize
					}
					
					const { data } = await merchantpage(params)
					this.communitlist = reset ? data.records : [...this.communitlist, ...data.records]
					this.total = data.total
					this.hasMore = this.currentPage * this.pageSize < this.total
				} catch (error) {
					console.error('获取商家列表失败:', error)
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					})
					this.hasMore = true // 保持加载更多按钮显示，以便重试
				} finally {
					this.loading = false
				}
			},
			
			// 加载更多
			loadMore() {
				if (!this.hasMore || this.loading) return
				this.currentPage++
				this.fetchMerchantList()
			},
			
			// 设置滚动监听（触底加载更多）
			setupScrollListener() {
				uni.addEventListener('scroll', this.handleScroll)
			},
			
			// 处理滚动事件
			handleScroll() {
				const systemInfo = uni.getSystemInfoSync()
				const scrollHeight = systemInfo.scrollHeight
				const scrollTop = systemInfo.scrollTop
				const windowHeight = systemInfo.windowHeight
				
				// 距离底部100px时加载更多
				if (scrollTop + windowHeight >= scrollHeight - 100 && 
				    this.hasMore && 
				    !this.loading) {
					this.loadMore()
				}
			},
			
			ComData(id){
				uni.navigateTo({
					url:'/pages/community/details?id=' + id 
				})
			}
		}
	}
</script>

<style>
	page{
		background: #F8F8F8;
	}
	
	/* 加载动画样式 */
	.loading {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40rpx 0;
	}
	.loading-spinner {
		width: 40rpx;
		height: 40rpx;
		border: 4rpx solid #f3f3f3;
		border-top: 4rpx solid #EF7B3A;
		border-radius: 50%;
		animation: spin 1s linear infinite;
		margin-bottom: 10rpx;
	}
	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}
	
	/* 空状态样式 */
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 80rpx 0;
	}
	.empty-state image {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 20rpx;
	}
	.empty-state text {
		color: #999;
		font-size: 28rpx;
	}
	
	/* 加载更多样式 */
	.load-more {
		display: flex;
		justify-content: center;
		padding: 30rpx 0;
	}
	.load-more-text {
		padding: 12rpx 30rpx;
		background-color: #F8F8F8;
		color: #EF7B3A;
		border: 1rpx solid #EF7B3A;
		border-radius: 30rpx;
		font-size: 28rpx;
	}
	
	/* 没有更多数据样式 */
	.no-more {
		display: flex;
		justify-content: center;
		padding: 120rpx 0;
		color: #999;
		font-size: 28rpx;
	}
	
	/* 列表项动画 */
	.fade-in {
		opacity: 0;
		transform: translateY(20rpx);
		animation: fadeIn 0.5s ease forwards;
	}
	@keyframes fadeIn {
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
</style>

<style lang="scss">
	.commuit{
		margin: 30rpx 30rpx 0;
		background-color: #fff;
		padding: 30rpx 25rpx;
		display: flex;
		.img{
			border-radius: 10rpx;
			width: 210rpx;
			image{
				width: 100%;
				border-radius: 10rpx;
				height: 100%;
			}
			height: 190rpx;
			margin-right: 20rpx;
		}
		.left{
			flex: 1;
		}
		.name{
			color: #373737;
			font-size: 32rpx;
		}
		.dbs{
			color: #8C8C8C;
			font-size: 26rpx;
			margin: 5rpx 0 0rpx;
			  white-space: nowrap;
			  overflow: hidden;
			  text-overflow: ellipsis;
			  width: 400rpx;
			  display: inline-block;   /* 配合max-width生效 */
		}
		.tags{
			display: flex;
			width: 100%;
			margin-top: 20rpx;
			flex-wrap: wrap;
			.tags_itme{
				margin-bottom: 10rpx;
				padding: 3rpx 20rpx;
				border: 1rpx solid #A5A5A5;
				border-radius: 30rpx;
				margin-right: 10rpx;
				color: #ABABAB;
				max-width: 160rpx;
			  white-space: nowrap;
			  overflow: hidden;
			  text-overflow: ellipsis;
			  display: inline-block;   /* 配合max-width生效 */
			}
		}
	}
</style>